<template>
  <div id="todobox">
    <div class="header">
      <h1>Todo List</h1>
    </div>
    <div class="input-box">
      <input type="text" class="intext" @keyup.enter="addTodo" ref="input" />
      <button @click="btnAddTodo">+</button>
    </div>
    <div class="todo">
      <div class="todo-nav">
        <h2>Todo</h2>
        <div class="todo-num">{{todo.length}}</div>
      </div>
      <ul>
        <li v-for="(item, index) in todo" :key="item.id">
          <input type="checkbox" v-model="item.finish" @change="toComplete(index)" />
          <span>{{item.content}}</span>
          <a href="javascript:;" @click="deleteTodo(index)">-</a>
        </li>
      </ul>
    </div>
    <div class="complete">
      <div class="complete-nav">
        <h2>Complete</h2>
        <div class="complete-num">{{complete.length}}</div>
      </div>
      <ul>
        <li v-for="(item, index) in complete" :key="item.id">
          <input type="checkbox" v-model="item.finish" @change="toTodo(index)" />
          <span>{{item.content}}</span>
          <a href="javascript:;" @click="deleteComplete(index)">-</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "TodoList",
  data() {
    return {
      temp: "",
      todo: [],
      complete: []
    };
  },
  methods: {
    addTodo(event) {
      this.temp = event.target.value;
      if (this.temp.trim()) {
        this.todo.push({ id: +new Date(), content: this.temp, finish: false });
        event.target.value = "";
      } else {
        event.target.value = "";
        return;
      }
    },
    btnAddTodo() {
      this.temp = this.$refs.input.value;
      if (this.temp.trim()) {
        this.todo.push({ id: +new Date(), content: this.temp, finish: false });
        this.$refs.input.value = "";
      } else {
        this.$refs.input.value = "";
        return;
      }
    },
    deleteTodo(index) {
      this.todo.splice(index, 1);
    },
    deleteComplete(index) {
      this.complete.splice(index, 1);
    },
    toComplete(index) {
      let del = this.todo.splice(index, 1);
      this.complete.push(del[0]);
    },
    toTodo(index) {
      let del = this.complete.splice(index, 1);
      this.todo.push(del[0]);
    }
  },
  watch: {
    todo: {
      deep: true,
      handler: function(newValue, oldValue) {
        if (newValue) {
          storage.set("todo", newValue);
        } else {
          storage.set("todo", oldValue);
        }
      }
    },
    complete: {
      deep: true,
      handler: function(newValue, oldValue) {
        if (newValue) {
          storage.set("complete", newValue);
        } else {
          storage.set("complete", oldValue);
        }
      }
    }
  },
  mounted: function() {
    this.todo = storage.get("todo") || [];
    this.complete = storage.get("complete") || [];
  }
};
const storage = {
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
  get(key) {
    return JSON.parse(localStorage.getItem(key));
  }
};
</script>

<style scoped>
#todobox {
  width: 600px;
  background-color: #2c3e50;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  padding-bottom: 20px;
}
.header {
  width: 500px;
  height: 40px;
  margin: 20px auto;
  text-align: center;
}
.header h1 {
  font-weight: 300;
  color: #ffffff;
}
.input-box {
  width: 500px;
  height: 40px;
  margin: 0 auto;
}
.input-box .intext {
  float: left;
  width: 90%;
  height: 40px;
  line-height: 40px;
  outline: none;
  background-color: #34495e;
  border: none;
  border-bottom: 2px solid #1abc9c;
  font-size: 20px;
  font-weight: 200;
  padding: 0 10px;
  color: #ffffff;
  border-radius: 5px 0 0 0;
  overflow: hidden;
}
.input-box button {
  float: right;
  background-color: #1abc9c;
  width: 10%;
  height: 40px;
  line-height: 40px;
  font-size: 25px;
  color: #ffffff;
  outline: none;
  border: none;
  border-radius: 0 5px 0 0;
  transition: all 0.1s;
  cursor: pointer;
}
.input-box button:hover {
  font-size: 35px;
}
.input-box button:active {
  background-color: #1dceaa;
}
.todo {
  width: 500px;
  margin: 8px auto;
}
.todo-nav,
.complete-nav {
  overflow: hidden;
  height: 40px;
  line-height: 40px;
}
.todo-nav h2,
.complete-nav h2 {
  float: left;
}
.todo-num,
.complete-num {
  float: right;
  background-color: #1abc9c;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  margin: 5px 5px 0 0;
  color: #ffffff;
  font-size: 15px;
}
#todobox h2 {
  font-weight: 300;
  color: #ffffff;
}
.complete {
  width: 500px;
  margin: 0 auto;
}
.todo ul li,
.complete ul li {
  position: relative;
  width: 100%;
  line-height: 35px;
  background-color: #34495e;
  border-radius: 4px;
  border-left: 5px solid #1abc9c;
  margin-bottom: 10px;
  padding: 0 31px 0 34px;
  color: #ffffff;
  word-wrap: break-word;
}
.todo ul li span,
.complete ul li span {
  font-weight: 200;
}
.todo a,
.complete a {
  position: absolute;
  width: 20px;
  height: 30px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  right: 7px;
  color: #1abc9c;
  font-size: 40px;
}
input[type="checkbox"] {
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  outline: none;
  -webkit-appearance: none;
  background-color: #34495e;
  border: 2px solid #1abc9c;
  cursor: pointer;
}
input[type="checkbox"]::after {
  position: absolute;
  top: 3px;
  left: 3px;
  content: "";
  width: 9px;
  height: 5px;
  /* border: 2px solid #1abc9c; */
  border: 2px solid #ffffff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  opacity: 0.2;
}
input[type="checkbox"]:hover::after {
  opacity: 0.5;
}
input[type="checkbox"]:checked {
  background-color: #1abc9c;
}
input[type="checkbox"]:checked::after {
  opacity: 1;
}
</style>
